<template>
  <div>
    <h1>App</h1>

    {{ info }}

    <hr>
    <button @click="info.age++">info.age</button>
    <button @click="info.size.h++">info.size.h++</button>

  </div>
</template>
<script setup>
import { computed, reactive, ref, shallowReactive, shallowRef, toRef, toRefs, watch } from 'vue';

const info = reactive({
  name: 'jack',
  age: 20,
  size: {
    h: 100,
    w: 200
  }
})

// 对对象的第一层属性进行侦听
watch(() => ({ ...info }), (a, b) => {
  console.log(a, b);
})
// watch(() => {
//   return { ...info }
// }, (a, b) => {
//   console.log(a, b);
// })

// watch(() => info.size, (a, b) => {
//   console.log(a, b);
// })

// 侦听对象的单个属性
// watch(() => info.age, (a, b) => {
//   console.log(a, b);
// })

// 深层监听
// watch(info, (a, b) => {
//   console.log(a, b);
// })


// watch(() => {
//   return info.age
// }, (a, b) => {
//   console.log(a, b);
// })



</script>
